<template>
    <div>
        <el-button @click="rouFun">点击</el-button>
        <div v-if="this.$store.state.flag">state======{{ this.$store.state.flag }}</div>
        <hr>
        <div>mapState(['flag'])===={{ flag }}</div>
        <hr>
        <div>mapState({flag2:(state)=>state.flag})===={{ flag2 }}</div>
        <hr>
        <el-button @click="setFlag(!flag)">flag</el-button>
        <hr>
        <el-button @click="setFlag2(!flag)">flag2</el-button>
        <hr>
        <el-button @click="layzFlag(!flag)">flag3</el-button>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
    data() {
        return {

        };
    },
    computed: {
        ...mapState(['flag']),
        ...mapState({
            flag2: (state) => state.flag
        })
    },
    methods: {
        ...mapMutations(['setFlag']),
        ...mapMutations({
            'setFlag2': (commit, n) => commit('setFlag', n)
        }),
        ...mapActions(['layzFlag']),
        rouFun() {
            this.$store.commit('setFlag', false)
            // this.$router.push({name:'home',params:{userId:123}})
            this.$router.push({ path: 'home', query: { userId: 123 } })
        }
    },
    components: {

    },
};
</script>

<style scoped>
</style>
